<template>
    <div :class="['main', 'pui-theme']" style="height: auto;">
        <LayoutHeader />
        <div class="body-content">
            <div class="phot-analyze-content phot-system-content">
                <div class="phot-system-content-toolbar">
                    <div class="toolbar-content">
                        <pui-toolbar :toolbarList="mainRef.toolbarList1" v-if="diagramExist"></pui-toolbar>
                        <pui-toolbar :toolbarList="mainRef.toolbarList2" v-else></pui-toolbar>
                        <div id="contextmenu"
                            v-show="menuVisible"
                            class="menu">
                            <div class="contextmenu__item"
                                @click="saveimg()">dq</div>
                            <div class="contextmenu__item"
                                @click="saveimg()">sy</div>
                        </div>
                    </div>
                </div>
                <div class="phot-system-content-main phot-analyze-content-main">
                    <div class="center">
                        <windows-manager ref="DiagramsRef" @focusChange="focusChange" @numberChange="numberChange"></windows-manager>
                    </div>
                    <div class="right">
                        <analyze-manager ref="analyzeManagerRef" @add="addDiagram" @changeState="changeState"></analyze-manager>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent} from 'vue'
export default defineComponent({
    name: 'Content'
})
</script>
<script lang="ts" setup>
import { ipcRenderer } from 'electron'
import { reactive, ref, onMounted, nextTick, getCurrentInstance} from 'vue'
import LayoutHeader from './LayoutHeader.vue'
import WindowsManager from './WindowsManager.vue'
import AnalyzeManager from './AnalyzeManager.vue'
const { proxy }: any = getCurrentInstance()
const DiagramsRef = ref();
const analyzeManagerRef = ref();
onMounted(async () => {
    proxy.$loading.open('正在绘制图表...')
    await nextTick()
    setTimeout(async () => {
        const winData = await ipcRenderer.invoke('get-data')
        DiagramsRef.value.init(winData.output)
        analyzeManagerRef.value.init(winData.output)
        proxy.$loading.close()
        // console.log(winData)
    }, 500)
})
const props = defineProps({
    disabled: {
        type: Boolean,
        default: false
    },
    placement: {
        type: String,
        default: 'bottom'
    },
})
const menuVisible = ref(false)
const diagramExist = ref(false)
const mainRef = reactive({
    toolbarList1:[
        {
            title:'文件',
            type:'file',
            options: [
                {
                    display: 'row',
                    showText: true,
                    size: 'large',
                    list: [
                        {
                            display: 'column',
                            label: '打开',
                            icon: 'folder-open',
                            id: '1',
                            arrow: true,
                            fn:() => {
                                test()
                            }
                        },
                    ]
                },
                {
                    display: 'row',
                    showText: true,
                    size: 'large',
                    list: [
                        {
                            display: 'column',
                            label: '导出',
                            icon: 'save',
                            id: '2',
                        
                            dataList:[
                                {
                                    label: '导出当前图片',
                                    value: '1',
                                    fn: () => {
                                        saveimg();
                                    }
                                },
                                {
                                    label: '导出全部图片',
                                    value: '2',
                                    fn: () => {
                                        saveAllImg();
                                    }
                                },
                                {
                                    label: '导出当前pdf',
                                    value: '3',
                                    fn: () => {
                                        savePDF();
                                    }
                                },
                                {
                                    label: '导出全部pdf',
                                    value: '4',
                                    fn: () => {
                                        saveAllPDF();
                                    }
                                },
                                {
                                    label: '导出当前数据',
                                    value: '5',
                                    fn: () => {
                                        saveCSV();
                                    }
                                },
                                {
                                    label: '导出全部数据',
                                    value: '6',
                                    fn: () => {
                                        saveAllCSV();
                                    }
                                }
                            ]
                        },
                    ]
                },
            ]
        },
        {
            title: '视图',
            type: 'file',
            options: [
                {
                    display: 'row',
                    showText: true,
                    size: 'large',
                    list: [
                        {
                            display: 'column',
                            label: '还原',
                            icon: 'restore',
                            id: '4',
                            fn:() => {
                                
                            }
                        },
                        {
                            display: 'column',
                            label: '放大',
                            icon: 'zoom-in',
                            id: '5',
                            fn:() => {
                                
                            }
                        },
                        {
                            display: 'column',
                            label: '缩小',
                            icon: 'zoom-out',
                            id: '6',
                            fn:() => {
                                
                            }
                        }
                    ]
                }
            ]
        },
        {
            title: '窗口',
            type: 'file',
            options: [
                {
                    display: 'row',
                    showText: true,
                    size: 'large',
                    list: [
                        {
                            display: 'column',
                            label: '全部关闭',
                            icon: 'folder-close',
                            id: '7',
                            fn:() => {
                                closeAll();
                            }
                        },
                    ]
                }
            ]
        }
    ],
    toolbarList2:[
        {
            title:'文件',
            type:'file',
            options: [
                {
                    display: 'row',
                    showText: true,
                    size: 'large',
                    list: [
                        {
                            display: 'column',
                            label: '打开',
                            icon: 'folder-open',
                            id: '1',
                            arrow: true,
                            fn:() => {
                                test()
                            }
                        },
                    ]
                },
                {
                    display: 'row',
                    showText: true,
                    size: 'large',
                    list: [
                        {
                            display: 'column',
                            label: '导出',
                            icon: 'save',
                            id: '2',
                        },
                    ]
                },
            ]
        },
        {
            title: '视图',
            type: 'file',
            options: [
                {
                    display: 'row',
                    showText: true,
                    size: 'large',
                    list: [
                        {
                            display: 'column',
                            label: '还原',
                            icon: 'restore',
                            id: '4',
                            fn:() => {
                                
                            }
                        },
                        {
                            display: 'column',
                            label: '放大',
                            icon: 'zoom-in',
                            id: '5',
                            fn:() => {
                                
                            }
                        },
                        {
                            display: 'column',
                            label: '缩小',
                            icon: 'zoom-out',
                            id: '6',
                            fn:() => {
                                
                            }
                        }
                    ]
                }
            ]
        },
        {
            title: '窗口',
            type: 'file',
            options: [
                {
                    display: 'row',
                    showText: true,
                    size: 'large',
                    list: [
                        {
                            display: 'column',
                            label: '全部关闭',
                            icon: 'folder-close',
                            id: '7',
                            fn:() => {
                                closeAll();
                            }
                        },
                    ]
                }
            ]
        }
    ],
    treeList: [
        {
            label: '测试',
            value: '0-1',
            children: [
                {
                    label: '测试文件1',
                    value: '0-1-1',
                    children: [
                        {
                            label: '测试文件1-1',
                            value: '0-1-1-1',
                        }
                    ]
                }
            ]
        }
    ] as any[],
})
const test = async () => {
    const thrift = require('thrift/lib/nodejs/lib/thrift')
    let result = await thrift.project.openDirectory("./")
    // console.log(result)
}
const saveimg = () => {
    nextTick(() => {
        DiagramsRef.value.saveimg(0);
    });
}
const saveAllImg = () => {
    nextTick(() => {
        DiagramsRef.value.saveAllImg();
    })
}
const savePDF = () => {
    nextTick(() => {
        DiagramsRef.value.savePDF(1);
    })
}
const saveAllPDF = () => {
    nextTick(() => {
        DiagramsRef.value.saveAllPDF();
    })
}
const saveCSV = () => {
    nextTick(() => {
        DiagramsRef.value.saveCSV();
    })
}
const saveAllCSV = () => {
    nextTick(() => {
        DiagramsRef.value.saveAllCSV();
    })
}
const addDiagram = (val:any) => {
    DiagramsRef.value.add(val);
}
const changeState = (val:any) => {
    DiagramsRef.value.changeState(val);
}
const focusChange = (e: any) => {
    analyzeManagerRef.value.focusChange(e.label, e.state)
}
const numberChange = (val:any) => {
    diagramExist.value = val
}
const closeAll = () => {
    DiagramsRef.value.closeAll();
}
const toggleOpen = () => {
    // componentRef.isShow = !componentRef.isShow
}
const clickOutsideHandle = () => {
    // componentRef.isShow = false
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>